<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    defaultFullscreen
    :footer="null"
    :closable="false"
    :keyboard="false"
    destroyOnClose
    class="jnpf-full-modal full-modal designer-modal jnpf-report-print-modal">
    <template #title>
      <div class="jnpf-full-modal-header">
        <div class="header-title">
          <img src="@/assets/images/jnpf.png" class="header-logo" />
          <span class="header-dot"></span>
          <p class="header-txt">报表打印预览</p>
        </div>
        <a-space class="options" :size="10">
          <a-button type="primary" @click="handlePrint()">{{ t('common.printText') }}</a-button>
          <a-button @click="handleCancel()">{{ t('common.cancelText') }}</a-button>
        </a-space>
      </div>
    </template>
    <div class="print-container">
      <div class="print-design-content">
        <JnpfUniver ref="jnpfUniverRef" />
      </div>
      <div class="print-main-container">
        <div class="main-warp">
          <JnpfUniverPrint ref="jnpfUniverPrintRef" :jnpf-univer-api="jnpfUniverAPI" />
        </div>
        <div class="config-warp bg-white">
          <ConfigForm :formState="formState" :configOptions="configOptions" v-if="!loading" />
        </div>
      </div>
    </div>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { reactive, ref, toRefs, unref, watch } from 'vue';
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { useI18n } from '@/hooks/web/useI18n';
  import { JnpfUniver, JnpfUniverPrint } from '../jnpfUniver/index';
  import { SetWorksheetActiveOperation } from '@univerjs/sheets';
  import ConfigForm from './ConfigForm.vue';

  defineOptions({ name: 'reportPrint' });

  interface State {
    reportData: any;
    formState: any;
    jnpfUniverAPI: any;
    configOptions: any;
    loading: boolean;
  }
  const { t } = useI18n();
  const [registerModal, { closeModal, changeLoading }] = useModalInner(init);

  const state = reactive<State>({
    reportData: {},
    jnpfUniverAPI: null,
    formState: {},
    configOptions: {},
    loading: false,
  });
  const { jnpfUniverAPI, formState, configOptions, loading } = toRefs(state);
  const jnpfUniverRef = ref();
  const jnpfUniverPrintRef = ref();

  watch(
    () => state.formState,
    value => {
      if (state.jnpfUniverAPI) unref(jnpfUniverPrintRef)?.handlePrintRender(value);
    },
    { deep: true },
  );

  async function init(data) {
    state.reportData = data;
    state.loading = true;
    changeLoading(true);
    handleCreate(data.snapshot);
  }
  // 创建报表实例
  function handleCreate(snapshot) {
    const res = unref(jnpfUniverRef)?.handleCreateDesignUnit({
      mode: 'print',
      snapshot,
      loading: false,
    });
    state.jnpfUniverAPI = res ? res?.jnpfUniverAPI : null;
    // 切换到指定的工作表
    const unitId = state.jnpfUniverAPI?.getActiveWorkbook()?.getId();
    if (state.reportData.sheetId) {
      state.jnpfUniverAPI?.executeCommand(SetWorksheetActiveOperation.id, { unitId, subUnitId: state.reportData.sheetId });
    }
    state.configOptions = unref(jnpfUniverRef).getPrintConfigs();
    state.jnpfUniverAPI?.getHooks()?.onSteady(() => {
      state.formState = { ...state.configOptions.defaultConfigForm, WorkbookTitleText: state.reportData.fullName };
      state.loading = false;
      changeLoading(false);
    });
  }
  // 销毁示例
  function handleDisposeUnit() {
    unref(jnpfUniverRef)?.handleDisposeUnit();
    state.jnpfUniverAPI = null;
  }
  function handleCancel() {
    handleDisposeUnit();
    closeModal();
  }
  // 打印
  function handlePrint() {
    unref(jnpfUniverPrintRef)?.handleBrowserPrint();
  }
</script>

<style lang="less">
  .jnpf-full-modal.jnpf-report-print-modal {
    .ant-modal-body > .scrollbar {
      padding: 0 !important;
    }
    .print-container {
      height: 100%;
      flex: 1;
      position: relative;
      .print-design-content {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        .jnpf-univer-design-content {
          opacity: 0;
        }
      }
      .print-main-container {
        position: absolute;
        inset: 0;
        z-index: 99;
        overflow: hidden;
        display: flex;
        .main-warp {
          flex: 1 0 0;
          height: 100%;
          overflow: auto;
          display: flex;
        }
        .config-warp {
          flex: 270px 0 0;
          padding: 10px;
          overflow-x: hidden;
          overflow-y: auto;
          .ant-radio-button-wrapper {
            padding: 0 11px;
          }
        }
      }
    }
  }
</style>
